$(function() {
	layui.use(["laypage", "table", "form"], function() {
		var laypage = layui.laypage;
		var page, limit;
		var $ = layui.jquery;
		var form = layui.form
		var table = layui.table;
		var element = layui.element;

		table.render({
			elem: '#tb',
			url: '../user/findAll',
			toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
			defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
				title: '提示',
				layEvent: 'LAYTABLE_TIPS',
				icon: 'layui-icon-tips'
			}],
			height: 480,
			title: '员工数据表',
			cols: [
				[ //表头
					{
						type: 'checkbox',
						fixed: 'left'
						// style: 'text-align:center'
					},{
						field: 'u_name',
						title: '名字',
						width: 150,
						sort: true,
						fixed: true
					},
					{
						field: 'u_phone',
						title: '手机',
						width: 200
					}, {
						field: 'u_doc_type',
						title: '证件类型',
						width: 200
					}, {
						field: 'u_doc_number',
						title: '证件号码',
						width: 200
					}, {
						field: 'u_sex',
						title: '性别',
						width: 100,
						sort: true
					}, {
						field: 'u_age',
						title: '年龄',
						width: 100
					},{
						field: 'u_birthday',
						title: '出生日期',
						width: 150,
						sort: true
					}, {
						field: 'u_ismarry',
						title: '是否已婚',
						width: 150,
						sort: true
					}, {
						field: 'u_country',
						title: '国家地区',
						width: 200
					}, {
						field: 'u_nation',
						title: '民族',
						width: 150
					},  {
						field: 'u_politics',
						title: '政治面貌',
						width: 150
					}, {
						field: 'u_native',
						title: '籍贯',
						width: 150
					},{
						field: 'u_health',
						title: '健康状况',
						width: 100
					},{
						field: 'u_education',
						title: '最高学历',
						width: 100
					}, {
						field: 'u_job_number',
						title: '工号',
						width: 100
					}, {
						field: 'u_department',
						title: '部门',
						width: 150
					}, {
						field: 'u_entry_time',
						title: '入职时间',
						width: 150
					}, {
						field: 'u_job',
						title: '岗位',
						width: 100
					}, {
						field: 'u_superior',
						title: '直属上级',
						width: 100
					},{
						fixed: 'right',
						title: '操作',
						width: 200,
						align: 'center',
						toolbar: '#barDemo'
					}]],

			page: true,
			id: 'testReload'
		});


		//监听表格复选框选择
		table.on('checkbox(cu_demo)', function(obj) {
			console.log(obj)
		});

		//监听表格操作
		table.on('tool(cu_demo)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象

			if (layEvent === 'del') { //删除
				layer.confirm('真的删除ID为：' + data.userId + "的用户吗?", function(index) {

					//console.log(data.p_id);
					//向服务端发送删除指令
					$.ajax({
						url: '/userDel',
						type: 'get',
						data: {
							'id': data.userId
						}, //向服务端发送删除的id
						success: function(suc) {
							if (suc == 200) {
								obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
								layer.close(index);
								console.log(index);
								layer.msg("删除成功", {
									icon: 1
								});
							} else {
								layer.msg("删除失败", {
									icon: 5
								});
							}
						}
					});
					layer.close(index);
				});

			} else if (layEvent === 'edit') { //编辑
				console.log(data);
				layer.open({
					//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
					type: 2,
					
					title: "修改员工信息",
					shade: 0.8,
					area: ['800px', '80%'],
					// shadeClose: false,
					content: 'add_user.html' //引用的弹出层的页面层的方式加载修改界面表单
				});


				//要求在html中要有表单
				/* //用于给指定表单集合的元素赋值和取值,如果 object 参数存在，则为赋值
				form.val("usereditform", {
					"userid": data.userId,
					"userno": data.jobNo,
					"username": data.userName,
					"userpwd": data.pwd,
					"userclass": data.class
				}); */


				/* //同步更新缓存对应的值
				layer.confirm('要修改ID为：' + data.userId + "的用户吗?", function(index) {
					console.log(data.inexType);
					var useredit = {
						"userId": data.userId,
						"jobNo": data.jobNo,
						"userName": data.userName,
						"pwd": data.pwd,
						"class": data.class
					};
					$.ajax({
						url: '',
						type: 'post',
						data: useredit,
						//dataType:'json',
						success: function(sess) {
							if (sess == 200) {
								layer.msg("编辑成功", {
									icon: 1
								});
							} else {
								layer.msg("编辑失败", {
									icon: 5
								});
							}
						},
						error: function(xhr, status, error) {
							console.log(xhr);
							console.log(status);
							console.log(error);
						}
					});
				}); */
			}
		});

		


		//下拉选择框的监听
		form.on('select(cu_select)', function(data) {
			console.log(data.elem); //得到select原始DOM对象
			console.log(data.value); //得到被选中的值
			console.log(data.othis); //得到美化后的DOM对象
		});


		//创建员工弹出层
		//alert
		$("#cu_create").on("click",function() {
			//input here
			layer.open({
				type: 2,
				 title: 'CRM欢迎您',
				// shadeClose: true,
				shade:  [0.7, '#393D49'],
				area: ['800px', '80%'],
				// shadeClose: false,
				
				content: 'add_user.html', //iframe的url
				/* end: function() { //刷新页面
					location.reload();
				} */
			});
			//input above
		});

		//删除所有客户弹出层
		//alert
		$("#cu_del").click(function() {
			layer.alert("是否要删除全部客户");
			console.log(cu_form)
			$.ajax({
				type: "POST",
				url: "",
				//data: ,
				dataType: "JSON",
				success: function(data) {
					if (data.flag) {
						layer.closeAll();
						parent.location.reload();
					}
				}
			});
		});

		//搜索按钮
		$('#search_btn').click(function() {
			var inputVal = $('#cu_input').val();
			console.log(inputVal);
			table.reload('testReload', {
				url: '',
				//url: 'https://www.easy-mock.com/mock/5c131015dada7b27ac3a5c36/titi/noData',
				// ,methods:"post"
				request: {
					pageName: 'page', //页码的参数名称，默认：page
					limitName: 'pageSize' //每页数据量的参数名，默认：limit
				},
				where: {
					query: inputVal
				},
				page: {
					curr: 1
				}
			});
		});



	})
})
